<template>
  <view class="refresher-status" :class="status">
    <view class="iconfont" :class="[fv.icon]"></view>
    <view class="text">{{ fv.text }}</view>
  </view>
</template>

<script lang="ts" setup>
import { t } from '@/locale'
import { computed } from 'vue'

const props = defineProps<{ 
  status: ZPagingEnums.RefresherStatus
  rootProps: ZPagingProps
}>()
const fv = computed(() => {
  switch (props.status) {
    case 'complete':
      return {
        icon: ['icon-select'],
        text: props.rootProps.refresherCompleteText
      }
    case 'default':
      return {
        icon: ['icon-forward'],
        text: props.rootProps.refresherDefaultText
      }
    case 'loading':
      return {
        icon: ['icon-loading'],
        text: props.rootProps.refresherRefreshingText
      }
    case 'release-to-refresh':
      return {
        icon: ['icon-forward'],
        text: props.rootProps.refresherPullingText
      }
    case 'go-f2':
      return {
        icon: ['icon-forward'],
        text: t('zp.refresher.f2')
      }
  }
})
</script>

<style scoped lang="scss">
.refresher-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76rpx;

  .iconfont {
    margin-right: 16rpx;
  }
}

.default {
  .iconfont {
    transform: rotate(90deg);
  }
}

.release-to-refresh {
  .iconfont {
    transform: rotate(-90deg);
  }
}
</style>